<template>
  <div class="chips-details">
      <div class="details-message">
          <router-link to="/home"></router-link>
          <img :src="chipsDetails.activityImage" alt="">
          <p>{{chipsDetails.activityAddress}}</p>
    </div>
    <div class="user-message">
        <div class="clear-fix user-style">
            <img :src="userData.userImage" alt="">
            <span>{{userData.userName}}</span>
        </div>
        <div class="explain-style">
            <span>自我介绍：</span>
            <p v-html="supportMessage.userIntroduction || '<div style=font-size:0.24rem;>暂未填写自我介绍哦</div>'"></p>
        </div>
    </div>
    <div class="money-message">
        <div class="raise clear-fix">
            <div>
                <span>已筹：</span>
                <span>￥</span>
                <span>{{supportMessage.nowMoney==undefined?'0':parseInt(supportMessage.nowMoney)}}</span>

                <span v-if="(''+supportMessage.nowMoney).split('.')[1] != undefined">.{{(''+supportMessage.nowMoney).split('.')[1] || ''}}</span>
            </div>
            <div>
                <span>完成</span>
                <span>{{supportMessage.nowMoney==undefined?'100%':Math.floor((supportMessage.nowMoney/supportMessage.allMoney*100))+'%' || 0}}</span>
            </div>
        </div>
        <div class="progress-bar">
            <div></div>
        </div>
        <div class="active-message">
            <div>
                <span>￥{{supportMessage.allMoney || 0}}</span>
                <span>目标金额</span>
            </div>
            <div>
                <span>{{utils.parseTime(chipsDetails.restrictTime - new Date().getTime())}}</span>
                <span>剩余时间</span>
            </div>
            <div>
                <span>{{supportMessage.supportNumber}}次</span>
                <span>支持次数</span>
            </div>
        </div>
    </div>
    <div class="image-text">
        <div class="image-bgc">
            <h4 class="clear-fix">
                <span></span>
                <span>活动详情</span>
            </h4>
            <div class="chilps-text" v-html="chipsDetails.activityContent"></div>
            <div class="examine-all" @click="examineAll" v-if="allText">
                <span>查看全文</span>
                <img src="../assets/下箭头@3x.png" alt="">
            </div>
        </div>
    </div>
    <comment :supportList="supportMessage.list" :identification = "activeId"></comment>
    <div class="initiate-chips" v-show="initiateBtn">
        <router-link to="/home/"><img src="../assets/首页1@3x.png" alt=""></router-link>
        <span>专业的老师，期待为你解答疑惑…</span>
        <router-link :to="'/home/chips_list'"><button>我也发起众筹</button></router-link>
    </div>
    <!-- 支持 -->
    <div class="chips-fn">
        <div class="fn">
            <collect :collectId="activeId[1]" :collectType="chipsDetails.collectionType"></collect>
            <div>
                <img src="../assets/分享@3x.png" alt="">
                <div @click="onShareHint">分享</div>
            </div>
        </div>
        <div class="sustain-btn">
            <a href="javascript:" @click="onSupport(supportMessage.allMoney,supportMessage.nowMoney)">
              <button>我要支持</button>
            </a>
        </div>
    </div>
    <!-- 分享 -->
    <div class="share-hint" v-show="shareHint" @click="shareHint = false">
        <img src="../assets/箭头.png" alt="">
        <img src="../assets/文字.png" alt="">
    </div>
    <!-- <share class="stare-style" v-show="stareShow" :stareId="activeId[1]"></share> -->
  </div>
</template>
<script>
import comment from './sub_comonents/comment'
import collect from './sub_comonents/collect'
import share from './sub_comonents/stare'
export default {
    data() {
        return {
            name: '我的众筹',
            initiateBtn: false,
            activeId: [], //用户以及活动id
            chipsDetails: {}, //活动数据
            allText: false,
            supportMessage: {}, //支持信息
            userData: {}, //用户信息
            stareShow: false, //分享
            shareHint: false //分享提示
        }
    },
    created() {
        document.title = '我的众筹'
        this.activeId = this.$route.params.activeId.split(',')
    },
    mounted() {
        this.getChips()
        this.getSupport()
    },
    components: {
        comment,
        collect,
        share
    },
    methods: {
        // 微信绑定手机号登录
        wxLogin() {
            // 获取uuid
            let isSgin = this.utils.cookie('get', 'sgin_messages') //uuid等一些信息
            // 在有uuid等一些信息的情况下进行获取openid登录
            if (isSgin && this.utils.browser.weixin) {
                // 获取微信用户openid
                let uuid = isSgin.uuid //取绑定信息的uuid
                this.utils.$get(
                    this.utils.GETOPENID,
                    parame => {
                        // 存openid
                        let wx = parame.data
                        if (wx.openid != null) {
                            // 格式化openid信息
                            let openid = JSON.stringify(parame.data)
                            // 将openid存到cookie
                            this.utils.cookie('set', 'wx_message', openid, 'd1')
                            // 将openid存到仓库
                            this.$store.commit('transmitWx', openid.unionid)
                        }
                        // 查询是否绑定手机号
                        this.utils.$get(
                            this.utils.ISBINDPHONE,
                            res => {
                                // 此微信用户是否绑定手机号
                                if (!res.data) {
                                    // 触发进行绑定手机号
                                    this.$store.commit('transmiBindTel', true)
                                    // 绑定手机号逻辑
                                } else {
                                    // 已绑定手机号直接进行登录
                                    this.utils.$post(
                                        this.utils.GET_WX_LOGIN,
                                        res => {
                                            // 获取用户数据
                                            this.utils.$get(
                                                this.utils.GET_USER_mESSAGE,
                                                data => {
                                                    // 将用户数据发送到仓库
                                                    this.$store.commit(
                                                        'transmitUser',
                                                        data.data
                                                    )
                                                    // 跳转到支持页面
                                                    this.$router.push({
                                                        path:
                                                            '/support/' +
                                                            this.activeId[0] +
                                                            ',' +
                                                            this.activeId[1]
                                                    })
                                                }
                                            )
                                        },
                                        { openid: wx.unionid }
                                    )
                                }
                            },
                            { unionid: wx.unionid }
                        )
                    },
                    { identity: uuid }
                )
            }else{
                mui.toast('请打开微信浏览器授权支持')
            }
        },

        // 跳转支持
        onSupport(allMoney, nowMoney) {
            if (this.chipsDetails.restrictTime - new Date().getTime() <= 0) {
                return mui.toast('活动已结束')
            }
            if (allMoney - nowMoney <= 0) {
                return mui.toast('众筹金额已满')
            }
            let isSgin = this.utils.cookie('get', 'sgin_messages') || null //uuid等一些信息
            this.wxLogin()
        },
        // 查看全文
        examineAll() {
            document.querySelector('.image-text').style.height = 'auto'
            this.allText = false
        },
        // 获取改众筹信息
        getChips() {
            this.utils.$get(
                this.utils.GET_CHIPS_DETAILS,
                data => {
                    this.chipsDetails = data.data || this.chipsDetails
                    if (this.chipsDetails) {
                        this.userListLength = data.data.userList.length
                    }
                    //    查看全文
                    this.$nextTick(() => {
                        let RichText = document.querySelector('.chilps-text')
                            .offsetHeight
                        if (RichText >= 340) {
                            this.allText = true
                        }
                    })
                    // 滚动发起众筹按钮
                    let headline =
                        document.querySelector('.details-message>p').offsetTop +
                        document.querySelector('.details-message>p')
                            .offsetHeight
                    if (window) {
                        window.addEventListener('scroll', e => {
                            let t =
                                document.documentElement.scrollTop ||
                                document.body.scrollTop
                            if (t >= headline) {
                                this.initiateBtn = true
                            } else {
                                this.initiateBtn = false
                            }
                        })
                    }
                },
                { id: this.activeId[1] }
            )
        },
        // 获取支持详情
        getSupport() {
            this.utils.$get(
                this.utils.GET_SUPPOIRT_DETAILS,
                data => {
                    this.supportMessage = data.data
                    this.userData = data.data.user || this.userData
                    document.querySelector('.progress-bar div').style.width =
                        Math.floor(
                            this.supportMessage.nowMoney /
                                this.supportMessage.allMoney *
                                100
                        ) + '%'
                },
                { userId: this.activeId[0], activityId: this.activeId[1] }
            )
        },
        // 分享
        onShareHint() {
            if (this.utils.browser.weixin) {
                this.shareHint = true
            }
        }
    }
}
</script>

<style lang="less">
.chips-details {
    // width: 100%;
    .details-message {
        height: 4.8rem;
        position: relative;
        > a {
            position: absolute;
            width: 0.7rem;
            height: 0.7rem;
            top: 0.4rem;
            left: 0.4rem;
            background: url('../assets/首页2@3x.png') no-repeat center/cover;
        }
        > img {
            width: 100%;
            height: 100%;
            background-color: #666;
        }
        > p {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 0.1rem 0.26rem;
            line-height: 0.4rem;
            color: #fff;
            font-size: 0.28rem;
        }
    }
    .user-message {
        padding: 0 0.26rem;
        .user-style {
            padding: 0.3rem 0;
            border-bottom: 1px solid #ddd;
            > img {
                border-radius: 50%;
                width: 0.8rem;
                height: 0.8rem;
                background-color: #666;
                float: left;
            }
            > span {
                float: left;
                line-height: 0.8rem;
                color: #333;
                font-size: 0.28rem;
                margin-left: 0.2rem;
            }
        }
        .explain-style {
            padding-bottom: 0.4rem;
            border-bottom: 1px solid #ddd;
            > span {
                display: block;
                padding: 0.3rem 0;
                font-size: 0.28rem;
                color: #999;
            }
            > p {
                color: #333;
                font-size: 0.3rem;
                line-height: 0.45rem;
            }
        }
    }
    .money-message {
        padding: 0 0.26rem;
        .raise {
            padding: 0.4rem 0;
            > div {
                &:first-child {
                    float: left;
                    > span {
                        &:nth-child(1) {
                            color: #999;
                            font-size: 0.28rem;
                        }
                        &:nth-child(2) {
                            color: #f93a3a;
                            font-size: 0.24rem;
                        }
                        &:nth-child(3) {
                            color: #f93a3a;
                            font-weight: 600;
                            font-size: 0.36rem;
                        }
                        &:nth-child(4) {
                            color: #f93a3a;
                            font-size: 0.3rem;
                            font-weight: 600;
                        }
                    }
                }
                &:last-child {
                    float: right;
                    > span {
                        &:nth-child(1) {
                            color: #333;
                            font-size: 0.28rem;
                        }
                        &:nth-child(2) {
                            color: #00d8c9;
                            font-size: 0.28rem;
                        }
                    }
                }
            }
        }
        .progress-bar {
            width: 100%;
            background-color: #e5e5e5;
            height: 0.16rem;
            border-radius: 0.08rem;
            > div {
                width: 100%;
                height: 100%;
                background: linear-gradient(to right, #44e9d7, #00d8c9);
                border-radius: 0.08rem;
            }
        }
        .active-message {
            margin: 0.4rem 0;
            padding: 0.4rem 0;
            background-color: #f9f9f9;
            height: 1.6rem;
            > div {
                float: left;
                width: 33.33%;
                border-right: 1px solid #e5e5e5;
                > span {
                    width: 100%;
                    display: block;
                    text-align: center;
                    &:last-child {
                        margin-top: 0.2rem;
                    }
                }
                &:last-child {
                    border: none;
                }
            }
        }
    }
    .image-text {
        width: 100%;
        height: 6.4rem;
        background-color: #f9f9f9;
        padding: 0.2rem 0 0;
        overflow: hidden;
        .image-bgc {
            padding: 0 0.26rem;
            background-color: #fff;
            position: relative;
            height: 100%;
            > div {
                padding: 0.4rem 0;
            }
            > h4 {
                > span {
                    margin-top: 0.2rem;
                    float: left;
                    &:first-child {
                        display: inline-block;
                        width: 0.04rem;
                        height: 0.4rem;
                        background-color: #00d8c9;
                    }
                    &:last-child {
                        margin-left: 0.1rem;
                        font-weight: 600;
                        color: #333;
                        line-height: 0.4rem;
                    }
                }
            }
            .examine-all {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: rgba(255, 255, 255, 0.6);
                height: 1.2rem;
                > span {
                    display: block;
                    text-align: center;
                }
                > img {
                    display: block;
                    margin: 0.1rem auto;
                    height: 0.2rem;
                }
            }
        }
    }
    .initiate-chips {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding: 0.2rem 0.26rem;
        border-bottom: 1px solid #ddd;
        background-color: #fff;
        z-index: 333;
        > a {
            > img {
                width: 0.5rem;
                vertical-align: middle;
                padding-right: 0.1rem;
                border-right: 1px solid #e5e5e5;
            }
            > button {
                float: right;
                background-color: #00d8c9;
                border: none;
                color: #fff;
                font-size: 0.24rem;
                height: 0.6rem;
                width: 2rem;
                border-radius: 0.3rem;
                text-align: center;
            }
        }

        > span {
            display: inline-block;
            line-height: 0.6rem;
            vertical-align: middle;
        }
    }
    .chips-fn {
        height: 1rem;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        width: 100%;
        border-top: 1px solid #eee;
        .fn {
            height: 100%;
            width: 50%;
            float: left;
            > div {
                height: 100%;
                width: 50%;
                float: left;
                margin-top: 0.2rem;
                > span {
                    width: 0.45rem;
                    height: 0.4rem;
                    display: block;
                    margin: 0 auto;
                }
                > img {
                    width: 0.45rem;
                    height: 0.4rem;
                    display: block;
                    margin: 0 auto;
                }
                > div {
                    font-size: 0.22rem;
                    color: #666;
                    text-align: center;
                }
            }
        }
        .sustain-btn {
            float: right;
            width: 50%;
            height: 100%;
            > a {
                display: block;
                width: 100%;
                height: 100%;
                > button {
                    font-size: 0.36rem;
                    width: 100%;
                    height: 100%;
                    background-color: #00d8c9;
                    text-align: center;
                    color: #fff;
                    border-radius: 0;
                }
            }
        }
    }
    .stare-style {
        position: fixed;
        width: 100%;
        bottom: 1rem;
        z-index: 1121;
        left: 0;
        background-color: #f5f5f5;
    }
    .share-hint {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.6);
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        position: 999;
        > img {
            &:first-child {
                width: 2rem;
                position: absolute;
                top: 0;
                right: 0;
            }
            &:last-child {
                width: 5rem;
                display: block;
                margin: 2.5rem auto;
            }
        }
    }
}
</style>

